<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/style.min.css">
		<style type="text/css">
			*{margin:0; padding:0;}
			.loading{
				width:100%;
				height:100%;
				position:fixed;
				top:0;
				left:0;
				z-index:100;
				background:#00000000;
			}
			.loading .pic{
				width:100px;
				height:100px;
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin:auto;
				font-size:20px;
				text-align:center;
				line-height:100px;
			}
		</style>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
		</style>
	</head>
	<body>
	<div class="loading" style="display:none;">
		<div class="pic">
            <div style="height: 60px"></div>
			<b>0%</b>
		</div>
	</div>

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 id="title" class="mui-title">首页</h1>
    </header>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-main.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
            <a class="mui-tab-item" href="tab-webview-subpage-doctor.html">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">医生</span>
            </a>
			<a class="mui-tab-item" href="tab-webview-subpage-my.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>

		</nav>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<!-- 先引入 Vue -->
		<script src="../js/vue.min.js"></script>
		<!-- 引入组件库 -->
		<script src="../js/index.js"></script>
		<script type="text/javascript" charset="utf-8">
             new Vue({
                 el: '#app',
                 data:function(){
                     return {
                     }
                 },
                 filters:{

                 },

                 mounted:function(){
                     this.ready();
                 },

                 methods:{
                     muiReady: function() {
                         //mui初始化
                         mui.init();
                         var subpages = ['tab-webview-subpage-main.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-doctor.html', 'tab-webview-subpage-my.html'];
                         var subpage_style = {
                             top: '45px',
                             bottom: '51px'
                         };

                         var aniShow = {};

                         //创建子页面，首个选项卡页面显示，其它均隐藏；
                         mui.plusReady(function() {
                             var self = plus.webview.currentWebview();
                             for (var i = 0; i < 4; i++) {
                                 var temp = {};
                                 var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                                 if (i > 0) {
                                     sub.hide();
                                 }else{
                                     temp[subpages[i]] = "true";
                                     mui.extend(aniShow,temp);
                                 }
                                 self.append(sub);
                             }
                         });
                         //当前激活选项
                         var activeTab = subpages[0];
                         //选项卡点击事件
                         mui('.mui-bar-tab').on('tap', 'a', function(e) {
                             var targetTab = this.getAttribute('href');
                             if (targetTab == activeTab) {
                                 return;
                             }
                             //更换标题
                             title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                             //显示目标选项卡
                             //若为iOS平台或非首次显示，则直接显示
                             if(mui.os.ios||aniShow[targetTab]){
                                 plus.webview.show(targetTab);
                             }else{
                                 //否则，使用fade-in动画，且保存变量
                                 var temp = {};
                                 temp[targetTab] = "true";
                                 mui.extend(aniShow,temp);
                                 plus.webview.show(targetTab,"fade-in",300);
                             }
                             //隐藏当前;
                             plus.webview.hide(activeTab);
                             //更改当前活跃的选项卡
                             activeTab = targetTab;
                         });
                         //自定义事件，模拟点击“首页选项卡”
                         document.addEventListener('gohome', function() {
                             var defaultTab = document.getElementById("defaultTab");
                             //模拟首页点击
                             mui.trigger(defaultTab, 'tap');
                             //切换选项卡高亮
                             var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
                             if (defaultTab !== current) {
                                 current.classList.remove('mui-active');
                                 defaultTab.classList.add('mui-active');
                             }
                         });
                     },
                     ready: function() {
                         var vue = this;
                         vue.$indicator.open({
                             spinnerType: 'fading-circle',
							 text: '加载中'
                         });
                         document.addEventListener('plusready', function() {
							 var version = plus.runtime.version;
							 $.ajax({
								 url:"http://111.230.165.123/api/version",
								 type:"get",
								 dataType:"JSON",
								 data: {"version": version},
								 error:function(XMLHttpRequest,textStatus,errorThrown){
                                     vue.$indicator.close();
									 vue.$toast('网络异常...');
								 },
								 success:function(XMLHttpRequest,textStatus,errorThrown){
                                     vue.$indicator.close();
									 if(XMLHttpRequest['url']){
										 vue.$messagebox.alert(XMLHttpRequest['description'],'有新版本发布！').then(function(){
                                             var dtask = plus.downloader.createDownload(XMLHttpRequest['url'], {method:"GET"}, function ( d, status ) {
                                                 $(".loading").fadeOut();
                                                 vue.$indicator.close();
                                                 if ( status == 200 ) {
                                                     var path = d.filename;
                                                     setTimeout("plus.runtime.quit();",2000);
                                                     plus.runtime.install(path);
                                                 } else {
                                                     vue.$toast( "下载失败，准备退出！");
                                                     setTimeout("plus.runtime.quit();",5000);
                                                 }
                                             });
                                             vue.$indicator.open({
                                                 spinnerType: 'fading-circle',
                                                 text: '下载中'
                                             });
                                             dtask.addEventListener( "statechanged", function(task,status){
                                                 if(task.downloadedSize){
                                                     $(".loading b").html(parseInt(task.downloadedSize/task.totalSize*100) + "%");
												 }
											 });
                                             dtask.start();
                                             $(".loading").show();
                                         });
									 }else{
									     vue.muiReady();
//									     var currentWebview = plus.webview.currentWebview();
//									     //plus.webview.hide(currentWebview);
//                                         var sub = plus.webview.create("tab-webview-subpage-chat.html","",{top:"45px",bottom:"51px"});
//                                         currentWebview.append(sub);
//                                         plus.webview.show(sub);
									 }
								 }
							 })
                         }, false);
                     }
                 }
             });
		</script>
	</body>
</html>